<template>
  <div>
    <vxe-toolbar>
      <template #buttons>
        <a-input-search
          v-model:value="ApiData.username"
          placeholder="用户账户查询"
          style="width: 200px"
          @search="onSearch"
          @pressEnter="onSearch"
        />
      </template>
    </vxe-toolbar>

    <vxe-table
      border
      show-header-overflow
      show-overflow
      resizable
      highlight-hover-row
      :align="allAlign"
      :data="tableData"
    >
      <vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>
      <vxe-table-column field="username" title="用户名"></vxe-table-column>
      <vxe-table-column field="picture" title="头像">
        <template #default="{ row }">
          <a-avatar alt="error" :src="row.picture" />
        </template>
      </vxe-table-column>
      <vxe-table-column field="role.role" title="角色"></vxe-table-column>
      <vxe-table-column field="address" title="操作">
        <template #default="{ row }">
          <a class="icon-bianji iconfont icon"></a>

          <!-- 删除 -->
          <a-popconfirm
            placement="right"
            ok-text="Yes"
            cancel-text="No"
            @confirm="deleteUserInfo(row)"
          >
            <template v-slot:title>
              <p>删除不可恢复，确定删除该用户嘛?</p>
            </template>
            <a class="icon-shanchu iconfont icon"></a>
          </a-popconfirm>
        </template>
      </vxe-table-column>
    </vxe-table>
    <!-- 分页 -->
    <a-pagination
      show-quick-jumper
      :default-current="2"
      :total="dataTotalNum"
      :defaultPageSize="ApiData.pageSize"
      @change="onChange"
    />
  </div>
</template>
<script>
import { userList } from '@/api/user'
export default {
  data() {
    return {
      // 表格数据居中
      allAlign: 'center',
      // api数据
      ApiData: {
        pageNum: 1,
        pageSize: 10,
        type: 0,
        userName: '',
      },
      // 表格数据
      tableData: [],
      // 总数
      dataTotalNum: 0,
    }
  },
  mounted() {
    this.getUserListData()
  },
  methods: {
    /**
     * 用户查询
     */
    onSearch() {},
    /**
     * 分页
     */
    onChange(pageNumber) {
      this.ApiData.pageNum = pageNumber
      this.getUserListData()
    },
    /**
     * 用户列表查询
     */
    getUserListData() {
      userList(this.ApiData).then((res) => {
        this.tableData = res.queryResult.list
        this.dataTotalNum = res.queryResult.total
      })
    },
    /**
     * 删除用户
     */
    deleteUserInfo(info){
      console.log(info)
    },
    /**
     * 
     */
    onSearch(){
      this.ApiData.type = 1
      console.log(this.ApiData)
    }
  },
}
</script>
<style lang="less" scoped>
.icon {
  margin: 0 10px;
  &:nth-child(2) {
    color: gray;
  }
}
</style>>

